<template>
  <div class="space-y-4">
    <div class="p-1 bg-gray-3200 inline-flex items-center rounded-full">
      <div class="inline-flex items-center justify-center cursor-pointer min-w-20 text-md p-1 rounded-full"
        :class="{'text-white bg-purple-1300': value === 'light', 'text-gray-1500 hover:text-purple-1300': value !== 'light'}"
        @click="changeTheme('light')">
        {{$t('detail_support_light')}}
      </div>
      <div class="inline-flex items-center justify-center cursor-pointer min-w-20 text-md p-1 rounded-full"
        :class="{'text-white bg-purple-1300': value === 'neutral', 'text-gray-1500 hover:text-purple-1300': value !== 'neutral'}"
        @click="changeTheme('neutral')">
        {{$t('detail_support_neutral')}}
      </div>
      <div class="inline-flex items-center justify-center cursor-pointer min-w-20 text-md p-1 rounded-full"
        :class="{'text-white bg-purple-1300': value === 'dark', 'text-gray-1500 hover:text-purple-1300': value !== 'dark'}"
        @click="changeTheme('dark')">
        {{$t('detail_support_dark')}}
      </div>
    </div>
    <div class="sm:text-left">
      <a :href="`https://www.toolify.ai/tool/${$route.params.handle}/?ref=embed`"
        target="_blank"
        style="cursor: pointer;"
        class="cursor-pointer"
        v-show="value === 'light'">
        <img src="https://cdn.toolify.ai/featured_light.svg"
          style="width: 250px; height: 60px;"
          width="250"
          height="54"
          :alt="title"
          srcset="">
      </a>
      <a :href="`https://www.toolify.ai/tool/${$route.params.handle}/?ref=embed`"
        target="_blank"
        style="cursor: pointer;"
        class="cursor-pointer"
        v-show="value === 'neutral'">
        <img src="https://cdn.toolify.ai/featured_neutral.svg"
          style="width: 250px; height: 60px;"
          width="250"
          height="54"
          :alt="title"
          srcset="">
      </a>
      <a :href="`https://www.toolify.ai/tool/${$route.params.handle}/?ref=embed`"
        target="_blank"
        style="cursor: pointer;"
        class="cursor-pointer"
        v-show="value === 'dark'">
        <img src="https://cdn.toolify.ai/featured_dark.svg"
          style="width: 250px; height: 60px;"
          width="250"
          height="54"
          :alt="title"
          srcset="">
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Support',
  props: {
    value: { type: String, default: 'light' },
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    title: {
      type: String | null,
      default: null,
    },
  },
  methods: {
    changeTheme(val) {
      this.$emit('input', val)
    },
  },
}
</script>